<template>
  <view class="title-bar">
    <view class="title-padding"></view>
    <view class="title-bar-content flex">
      <view class="tool">
        <uni-icons
          class="icon"
          type="back"
          size="34"
          @tap="handleBack"
        ></uni-icons>
      </view>
      <view class="content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
import UniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
  components: {
    UniIcons,
  },
  methods: {
    handleBack() {
      console.log('go back')
      this.$emit('back')
      uni.navigateBack({
        delta: 1,
      })
    },
  },
}
</script>

<style lang="scss">
.title-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 2upx solid #edeff6;
  .title-bar-content {
    display: flex;
    height: 88upx;
    align-items: center;
    background-color: #ffffff;
    .icon {
      color: #333333;
    }
    .tool {
      flex-basis: 80upx;
    }
    .content {
      flex: 1;
      text-indent: -80upx;
    }
  }
}
</style>
